
import React from 'react';
import { connect } from 'react-redux';
import { parseQueryString } from './../../utils';
import * as actions from './../../actions/a_appoint';
import { getPersonalInfo } from './../../actions/a_personal_info';
import { TimeIcon, CoordIcon } from './../../icons';
import moment from 'moment';
import classnames from 'classnames';
import { Toast } from 'react-weui';
import BindView from './../bind';
import {
  Redirect
} from 'react-router-dom';

const Course = (props) => {
  console.log(props);
  return <div className='course'>
      <div className='course-info'>
      <h3>{props.productDefineName}</h3>
      <p><TimeIcon/>开课日期: {props.beginTime}-{props.endTime}</p>
      <p><CoordIcon/>{props.city}</p>
    </div>
    <button
      onClick={() => {
        props.doAppoint(props.periodId);
      }}
    >报名</button>
  </div>
}

const MonthCourses = (props) => {
  let monthData = props.data || [];
  let monthItems = monthData.map((item, index) => {
    let beginTime = moment(item.beginTime).format('MM月DD日');
    let endTime = moment(item.endTime).format('MM月DD日');
    return <Course 
      productDefineName={item.productDefineName} 
      beginTime={beginTime}
      endTime={endTime}
      city={item.cityName}
      stateChange={props.stateChange} 
      key={index+''} 
      periodId={item.periodId}
      doAppoint={props.doAppoint}
    />
  })
  return <div className='month-courses'>
    <h2>{props.month}月</h2>
    <div className='courses'>
      {monthItems}
    </div>
  </div>
}

class AppoitView extends React.Component {

  componentDidMount() {
    document.title = '课程预约';
    let {
      location = {},
      match = {}
    } = this.props;

    let query = parseQueryString(location.search || '?code=');
    // this.props.getAppointments(query.code, match.params.periodId);
    this.props.getAppointments('shengjing360', match.params.periodId);
  }

  componentWillUnmount() {
    this.props.stateChange('step', 0);
  }

  render() {
    let {
      data = {},
      state = {},
      page = {},
      error = {},
      match = {}
    } = this.props;

    if (state.step === 1) {
      return <Redirect push to={'/appoint/course/'+state.periodId+'/1'}/>
    }

    // 后台传的是null，不能用默认值，默认值只对undefined有效
    data = data || {};
    let result = [];

    for (let key in data) {
      if (data.hasOwnProperty(key)) {
        result.push({
          id: key,
          data: data[key]
        })
      }
    }

    let size = page.size || 20;
    let number = page.number || 0;
    let total = page.total || 0;
    let canLoadMore = (number < (parseInt(total / size, 10)));

    if (this.props.state.doBind) { // 点击报名以后要判断 mobile ,如果没有, 就改变 doBind的值, 跳到 绑定界面
      return <BindView
        fromMsg={true}
        backHandler={() => {
          this.props.stateChange('doBind', false);
        }}
      />
    } else {
      let divs = [];
      for (let attr in data) {
        divs.push(<MonthCourses
          month={attr}
          data={data[attr]}
          key={attr}
          doAppoint={this.props.doAppoint}
          stateChange={this.props.stateChange} />
        );
      }
      return <div className='appoint'>
        {divs}
        {(!match.params.periodId)&&<p className={classnames('more', { 'canLoad': canLoadMore })}><button
          onClick={() => {
            if (canLoadMore) {
              this.props.moreAppoints();
            }
          }}
        >点击查看更多</button></p>}
        <Toast iconSize="" icon="warn" show={error.hasError}>{error.msg}</Toast>
      </div>
    }
  }
}

export default connect((store) => {
  return {
    ...store.appoint
  }
}, {
  ...actions,
  getPersonalInfo
})(AppoitView);